<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022-8-16</title>
    <style>
        form {
            width: 400px;
            border: 10px solid pink;
            padding: 20px;
        }

        label {
            display: block;
            height: 80px;
            position: relative;
        }

        input {
            height: 30px;
            font-size: 24px;
            padding-left: 20px;
        }

        label>span {
            position: absolute;
            left: 0;
            top: 35px;
            font-size: 20px;
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <form>
        <label>
            用户名: <input class="username" type="text" />
            <!-- 数字字母开头6～12位 忽略大小写 -->
            <span>请按照规则填写用户名</span>
        </label>
        <label>
            密码: <input class="password" type="text" />
            <!-- 数字字母下划线 6～12位 -->
            <span>请按照规则填写密码</span>
        </label>
        <label>
            手机号: <input class="phone" type="text" />
            <!-- 11位数字即可 -->
            <span>请按照规则填写手机号</span>
        </label>
        <label>
            邮箱: <input class="email" type="text" />
            <!-- 6～12位 开头为数字大小写字母 中间为数字字母下划线均可-->
            <!-- @ 只接收qq 163 sina -->
            <!-- com或者cn -->
            <span>请按照规则填写邮箱</span>
        </label>
        <input type="button" value="完善资料" />
    </form>
    <script>
        //================方法一=============================
        //依次去获取input元素
        // var username = document.querySelector('.username');
        // var password = document.querySelector('.password');
        // var phone = document.querySelector('.phone');
        // var email = document.querySelector('.email');

        // //验证用户名
        // //给用户名输入框绑定二级监听事件
        // username.addEventListener('input',function() {
        //     var user = /^[0-9a-zA-Z]{5,12}$/;//正则表达式存去一个变量里面
        //     if(user.test(this.value)) {//这里用test去判断是不是符合要求
        //         //符合要求走这里 点击了哪一个输入框
        //         //就去选择他下一级的兄弟元素 改变它的样式 span标签 
        //         this.nextElementSibling.style.display = 'none';
        //     } else {
        //         //如果用户输入的不正确 这里把span的样式给显示出来 提醒用户输入的不正确
        //         this.nextElementSibling.style.display = 'block';
        //     }
        // });
        // //验证密码
        // password.addEventListener('input',function() {
        //     var psw = /^[0-9]{5,12}$/;
        //     if(psw.test(this.value)) {
        //         this.nextElementSibling.style.display = 'none';
        //     } else {
        //         this.nextElementSibling.style.display = 'block';
        //     }
        // });
        // //验证手机号码
        // phone.addEventListener('input',function() {
        //     var reg_phone = /^[0-9]{11}$/;
        //     if (reg_phone.test(this.value)) {
        //         this.nextElementSibling.style.display = 'none';
        //     } else {
        //         this.nextElementSibling.style.display = 'block';
        //     }
        // })
        // //验证邮箱
        // email.addEventListener('input',function() {
        //     var reg_email = /^[0-9a-zA-Z]\w{5,12}@(qq|163|sina)\.(com|cn)$/;
        //     if (reg_email.test(this.value)) {
        //         this.nextElementSibling.style.display = 'none';
        //     } else {
        //         this.nextElementSibling.style.display = 'block';
        //     }
        // });
        //====================方法二====================================
        //统一验证
        //对象的建名 className 就用文本框的类名做标识
        // var regObj = {
        //     username: /^[0-9a-z]\w{5,11}$/i,
        //     password: /^\w{6,12}$/,
        //     phone: /^\d{11}$/,
        //     email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/
        // };
        // //拿到所有的文本框
        // var ipts = document.querySelectorAll('form input');
        // //给每一个绑定input事件 
        // ipts.forEach(function(item,index) {
        //     item.oninput = function() {
        //     //拿到你正在输入的这个input的内容
        //     var text = item.value;
        //     //拿到对应的正则
        //     var reg = regObj[item.className];
        //     //拿到对应的span
        //     var span = item.nextElementSibling;
        //     //操作显示和隐藏
        //     span.style.display = reg.test(text) ? 'none' : 'block';
        // };
        // });
        //=====================方法三==========================================
        // 把要正则存入一个对象中 
        var regObj = {
            username: /^[0-9a-z]\w{5,11}$/i,
            password: /^\w{6,12}$/,
            phone: /^\d{11}$/,
            email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/
        };
        // 获取那个装了四个input的盒子
        var form = document.querySelector('form');
        // console.log(form);
        //oninput 事件在用户输入时触发。 
        //给form添加绑定事件
        form.oninput = function (e) {
            //e.target事件目标 我点击了谁 就会获取到谁
            var t = e.target;
            console.log(t);
            var text = t.value;//这里拿到的是我输入的内容
            console.log(text);
            //拿到对应的正则
            var reg = regObj[t.className];
            console.log(reg);
            //获取兄弟元素span
            var span = t.nextElementSibling;
            // console.log(span);
            if (t.nodeName === 'INPUT') {
                span.style.display = reg.test(text) ? 'none' : 'block';
            }
        }
    </script>
</body>

</html>